import QtQuick 2.0

import QtQuick.Window 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4


Item {

    id: root
    property int editWidth: 180*dp

    property var date: new Date()         // 我也不知道为啥月份从0开始，日从1开始算……
    property var dateItem
    property string dateStr: calendar.selectedDate.toLocaleString(Qt.locale("de_DE"), "yyyy-MM-dd")

    property bool showCalendar: false

    function getDate(){
        return dateItem
    }function getText(){
        return dateStr
    }
    onFocusChanged: {
        if(!focus){
            showCalendar = false
        }
    }
    MouseArea{
        anchors.fill: parent
    }

    width: editWidth
    height: 40*dp

    Rectangle{
        id: rectInput
        anchors.fill: parent
        radius: 3*dp
        color: "#FFFFFF"
        border.color: "#CCCCCC"
        Text {
            text: dateStr
            anchors.verticalCenter: parent.verticalCenter
            x: 8
            font.pixelSize: config.fontsize
        }
        MouseArea{
            anchors.fill: parent
            onPressed: {
                parent.color = "#FAFAFA"
            }onReleased: {
                parent.color = "#FFFFFF"
                showCalendar = !showCalendar
                root.focus = true
            }
        }
    }
    Rectangle{
        id: calendar_layout
        height: 300*dp
        width: 300*dp
        clip: true
        y: 42*dp

        state: showCalendar ? "show" : "hide"
        states:[
            State{
                name: "show"
                PropertyChanges {
                    target: calendar_layout
                    height: 300*dp
                }
            },
            State{
                name: "hide"
                PropertyChanges {
                    target: calendar_layout
                    height: 0
                }
            }
        ]
        transitions: [
            Transition {
                from: "show"
                to: "hide"
                NumberAnimation{
                    properties: "height"
                    duration: 150
                }
            },Transition {
                from: "hide"
                to: "show"
                NumberAnimation{
                    properties: "height"
                    duration: 150
                }
            }
        ]

        Calendar{
            id: calendar
            height: 300*dp
            width: 300*dp
            selectedDate: date
            onClicked: {
                dateStr = selectedDate.toLocaleString(Qt.locale("de_DE"), "yyyy-MM-dd")
                dateItem = selectedDate
            }
            style: CalendarStyle{
                gridVisible: false
                navigationBar:Item {
                    height: calendar.height/8;
                    Rectangle{
                        anchors.fill: parent;
                        color: "#FFFFFF";
                        border.color: "transparent"
                        //去事件穿透
                        MouseArea{
                            anchors.fill: parent;
                            onPressed:{
                                mouse.accepted = true
                            }
                        }

                        Text{
                            id:dateText;
                            anchors.centerIn: parent;
                            color: "#333333";
                            font.pixelSize: config.fontsize
                            text:{
                                var str=control.visibleYear+"年"+fillZero(control.visibleMonth+1)+"月";
                                return str;
                            }
                        }
                        Rectangle{
                            id:previousMonth;
                            anchors.right: dateText.left;
                            anchors.rightMargin: 12*dp;
                            anchors.verticalCenter: dateText.verticalCenter;
                            width: 18*dp
                            height: 18*dp
                            color: "transparent";
                            CustomImage{
                                anchors.fill: parent;
                                source: "qrc:/picture/leftarrow.png"
                            }
                            MouseArea{
                                anchors.fill: parent;
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    control.showPreviousMonth();
                                    //dateText.text=control.visibleYear+"年"+(control.visibleMonth+1)+"月";
                                }
                            }
                        }
                        Rectangle{
                            id:nextMonth;
                            anchors.left: dateText.right;
                            anchors.leftMargin: 12*dp;
                            anchors.verticalCenter: dateText.verticalCenter;
                            width: 18*dp
                            height: 18*dp
                            color: "transparent";
                            CustomImage{
                                anchors.fill: parent;
                                source: "qrc:/picture/rightarrow.png"
                            }
                            MouseArea{
                                anchors.fill: parent;
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    control.showNextMonth();
                                }
                            }
                        }

                    }
                    //长度不足2 补零
                    function fillZero(value) {
                        return value.toString().length < 2 ? ('0' + value) : value
                    }

                }

                dayDelegate: Item {
                    id:dayDelegate;
                    readonly property color sameMonthDateTextColor: "#333333"
                    readonly property color selectedDateColor: "#409CE1"
                    readonly property color selectedDateTextColor: "white"
                    readonly property color differentMonthDateTextColor: "#D4D4D4"
                    readonly property color invalidDatecolor: "#dddddd"
                    height: 20*dp;
                    Rectangle {
                        anchors.fill: parent
                        color: "#FFFFFF";
                        anchors.margins: styleData.selected ? -1 : 0
                        Canvas{
                            anchors.fill:parent;
                            visible: styleData.selected;
                            onPaint: {
                                var ctx=getContext("2d");
                                ctx.strokeStyle="#1677FF";
                                ctx.fillStyle="#1677FF";
                                ctx.beginPath();
                                var diameter=20*dp;
                                ctx.ellipse(parent.width/2-diameter/2,parent.height/2-diameter/2,diameter,diameter);
                                ctx.closePath();
                                ctx.fill();
                                ctx.stroke();
                            }
                        }
                    }

                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        font.pixelSize: config.fontsize
                        color: {
                            var color = invalidDatecolor;
                            if (styleData.valid) {
                                // Date is within the valid range.
                                color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                                if (styleData.selected) {
                                    color = selectedDateTextColor;
                                }
                            }
                            color;
                        }
                    }
                }
            }
        }
    }



}
